import React, { useState } from "react";
import {
  Animated, StyleSheet,
  Text,
  TouchableOpacity,
  View
} from "react-native";
import ScrollView = Animated.ScrollView;
import {
  Button, Checkbox,
  Drawer,
  Flex,
  List,
  Pagination,
  SegmentedControl, Tabs,
  WhiteSpace,
  WingBlank
} from "@ant-design/react-native";
// @ts-ignore
import AntDesign from "react-native-vector-icons/AntDesign";
import FlexItem from "@ant-design/react-native/es/flex/FlexItem";
import AgreeItem from "@ant-design/react-native/es/checkbox/AgreeItem";
import CheckboxItem from "@ant-design/react-native/es/checkbox/CheckboxItem";

const App = () => {
  const [checked, setChecked] = useState(true);
  const [disabled, setDisabled] = useState(false);
  const [checkBox1, setCheckBox1] = useState(true);
  const [agreeItem1, setAgreeItem1] = useState(true);
  const [checkboxItem1, setCheckboxItem1] = useState(true);

  const onChange = (e: { target: { checked: boolean } }) => {
    console.log("output-> checked", e.target.checked);
  };

  const toggleChecked = () => {
    setChecked(!checked);
  };

  const toggleDisable = () => {
    setDisabled(!disabled);
  };

  const onChange2 = (e: { target: { checked: boolean } }) => {
    console.log("output-> checked = ", e.target.checked);
    setChecked(e.target.checked);
  };


  return (
    <ScrollView>
      <List renderHeader="基本用法">
        <List.Item
          thumb={<Checkbox onChange={onChange}>Checkbox</Checkbox>}
        />
      </List>
      <List renderHeader="不可用">
        <List.Item thumb={<Checkbox defaultChecked={false} disabled></Checkbox>} />
        <List.Item thumb={<Checkbox defaultChecked disabled></Checkbox>} />
      </List>
      <List
        renderHeader="受控的Checkbox"
        renderFooter={
          <Flex>
            <Flex.Item style={{ margin: 10 }}>
              <Button type="primary" size="small" onPress={toggleChecked}>
                {
                  !checked ? "Check" : "UnCheck"
                }
              </Button>
            </Flex.Item>
            <Flex.Item style={{ margin: 10 }}>
              <Button
                type="primary"
                size="small"
                onPress={toggleDisable}
              >
                {
                  !disabled ? "Disable" : "Enable"
                }
              </Button>
            </Flex.Item>
          </Flex>
        }
      >
        <List.Item
          thumb={
            <Checkbox
              checked={checked}
              disabled={disabled}
              onChange={onChange2}
            >
              Checked-Enabled
            </Checkbox>
          }
        >
        </List.Item>
      </List>
      <List renderHeader="AgreeItem">
        <AgreeItem>
          Agree agreement agreement agreement
        </AgreeItem>
      </List>

      <List renderHeader="CheckboxItem">
        <CheckboxItem
          checked={checkboxItem1}
          onChange={(e) => {
            setCheckboxItem1(e.target.checked);
          }}
        >
          选项01
        </CheckboxItem>
        <CheckboxItem>选项02</CheckboxItem>
        <CheckboxItem disabled>选项03</CheckboxItem>
        <CheckboxItem disabled checked right>
          更多...
        </CheckboxItem>
      </List>

      <List
        renderHeader={"全选\n在实现全选效果的时候，可能会用到indeterminate属性"}
      >
        <CheckboxGroupExample/>
      </List>

    </ScrollView>
  );
};

export default App;

const plainOptions = ["Apple", "Peer", "Orange"];
const defaultCheckedList = ["Apple", "Orange"];
const CheckboxGroupExample = () => {
  const [checkedList, setCheckedList] = React.useState(
    new Set(defaultCheckedList)
  );
  const [indeterminate, setIndeterminate] = React.useState(true);
  const [checkAll, setCheckAll] = React.useState(false);

  const onChange = (value: any, e: { target: { checked: boolean } }) => {
    if (e.target.checked) {
      checkedList.add(value);
    } else {
      checkedList.delete(value);
    }
    setCheckedList(new Set(checkedList));
    setIndeterminate(
      !!checkedList.size && checkedList.size < plainOptions.length
    );
    setCheckAll(checkedList.size === plainOptions.length);
  };

  const onCheckAllChange = (e: { target: { checked: boolean } }) => {
    setCheckedList(e.target.checked ? new Set(plainOptions) : new Set());
    setIndeterminate(false);
    setCheckAll(e.target.checked);
  };

  return (
    <>
      <CheckboxItem
        indeterminate={indeterminate}
        onChange={onCheckAllChange}
        checked={checkAll}
      >
        Check All
      </CheckboxItem>
      <WingBlank>
        {
          plainOptions.map((a) => (
            <CheckboxItem
              key={a}
              onChange={onChange.bind(this, a)}
              checked={checkedList.has(a)}
            >
              {a}
            </CheckboxItem>
          ))
        }
      </WingBlank>
    </>
  );

};

